<template>
  <view>
    <view class="van_top">
      <van-nav-bar title="商家注册" left-arrow @click-left="onClickLeft" />
    </view>
    <view class="pic">
      <image src="/static/login/login.png" mode="aspectFill" />
    </view>
    <view class="form">
      <form @submit="onSubmit">
        <van-field :value="registerForm.userName" required input-align="right" size="large" :name="registerForm.userName"
          label="登录账号" type="number" placeholder="请输入手机号" @change="e => registerForm.userName = e.detail.split(/[\t\r\f\n\s]*/g).join('')">
        </van-field>
				<view style="width: 1rpx;height: 1rpx;overflow: hidden;">
					<input type="text" value="" />
				</view>
        <van-field :value="registerForm.password" required input-align="right" size="large" :name="registerForm.password"
          label="设置密码" placeholder="8-16位字母或数字" @change="e => registerForm.password = e.detail.split(/[\t\r\f\n\s]*/g).join('')" password>
        </van-field>
        <van-field :value="registerForm.code" :name="registerForm.code" size="large" title-width="50rpx" type="number"
          placeholder="请输入验证码" @change="e => registerForm.code = e.detail.split(/[\t\r\f\n\s]*/g).join('')">
          <template slot="button">
            <view>
              <button class="btnClass" v-if="!isDataShow"><van-count-down :time="1000 * 60" format="ss 秒"
                  @finish="isDataShow = true" /></button>
              <button class="btnClass" @click="getNum" v-else :disabled="registerForm.userName == ''">获取验证码</button>
            </view>
          </template>
        </van-field>

        <view class="btn-box">
          <button class="submit-btn" type="info" form-type="submit">
            注册
          </button>
        </view>
        <view class="checkbox">
          <van-checkbox :value="registerForm.checked" @change="e => registerForm.checked = e.detail" shape="square"
            checked-color="#ff2c3b" icon-size="34rpx">
            <view class="txt">
              我已阅读并同意
            </view>
          </van-checkbox>
          <text class="txt">《</text>
          <text class="inner-txt" @click="toArg">
            用户注册协议
          </text>
          <text class="txt">》</text>
        </view>
      </form>
    </view>
  </view>
</template>

<script>
import Toast from "@/wxcomponents/vant/toast/toast"
import md5 from "md5";
import { reqRegister, reqCode } from "@/apis/user.js";
import formRules from "@/utils/formRules.js"
export default {
  name: "ShopRegister",
  data() {
    return {
      registerForm: {
        userName: "",
        password: "",
        code: "",
        checked: false
      },
      rules: {
        userName: [
          { required: true, message: '请填写手机号' },
          {
            pattern: /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/,
            message: '手机号格式错误'
          }
        ],
        password: [{ required: true, message: '请填写密码' }, { pattern: /^[a-zA-Z0-9]{8,16}$/, message: '密码格式为8-16位字母或数字' }],
        code: [{ required: true, message: '请输入验证码' }]
      },
      isDataShow: true
    }
  },
  methods: {
    onClickLeft() {
      uni.navigateBack();
    },
    onSubmit(e) {
      let { rules, registerForm } = this;
      formRules(rules, registerForm, async (status) => {
        if (status) {
          if (!registerForm.checked) {
            uni.utils.toast("请阅读并同意用户协议");
            return;
          }
          let { userName, password, code } = registerForm;
          let res = await reqRegister({ userName, password: md5(password), captcha: code });
          if (res.code === 200) {
            uni.utils.toast("注册成功", "success");
            setTimeout(() => {
              uni.navigateBack();
            }, 1000)
          }
        }
      })
    },
    getNum() {
      let rules = {
        userName: [
          { required: true, message: '请填写手机号' },
          {
            pattern: /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/,
            message: '手机号格式错误'
          }
        ],
        password: [{ required: true, message: '请填写密码' }, { pattern: /^[a-zA-Z0-9]{8,16}$/, message: '密码格式为8-16位字母或数字' }],
      }
      formRules(rules, this.registerForm, async (status) => {
        if (status) {
          let res = await reqCode({ phone: this.registerForm.userName });
          if (res.code === 200) {
            uni.utils.toast("验证码获取成功");
          }
          this.isDataShow = false
        }
      })
    },
    toArg() {
      uni.navigateTo({ url: '/packageA/pages/agreement/agreement?type=1' })
    }

  }
}
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  height: 100vh;
}

.pic {
  margin: 136rpx 0 100rpx 48rpx;
  width: 436rpx;
  height: 48rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

/deep/ .van-cell {
  padding: 24rpx 32rpx;
}

/deep/ .van-cell::after {
  border-bottom: 1px solid #ccc !important;
}

.form {
  padding: 0 16rpx;
}

.btn-box {
  padding: 64rpx 32rpx;

  .submit-btn {
    width: 100%;
    height: 68rpx;
    line-height: 68rpx;
    font-size: 32rpx;
    color: #FFFFFF;
    letter-spacing: 1px;
    background: linear-gradient(90deg, #FF4F30 0%, #FF1642 100%);
    border-radius: 8rpx;
    margin-bottom: 24rpx;
  }
}

.checkbox {
  position: absolute;
  width: 600rpx;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  bottom: 180rpx;

  .txt {
    font-size: 24rpx !important;
    color: #999999;
  }
}

.inner-txt {
  font-size: 24rpx !important;
  color: #FF1642;
}

.btnClass {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220rpx;
  height: 56rpx;
  background: #EEEEEE !important;
  border-radius: 36rpx 36rpx 36rpx 36rpx;
  font-size: 26rpx;
  color: #333333;
  line-height: 56rpx;
  border: 0 !important;
  outline: none;
  box-shadow: none;
}

button::after {
  border: none;
}</style>